class MessageBubble {
  constructor(messageData) {
    this.messageData = messageData;
    this.bubble = document.createElement('div');
  }

  render() {
    this.bubble.classList.add('message-bubble');
    if (this.messageData.sender === 'user') {
      this.bubble.classList.add('user-message');
    } else {
      this.bubble.classList.add('character-message');
    }

    // 头像
    const avatar = document.createElement('img');
    avatar.classList.add('message-avatar');
    avatar.src = this.messageData.avatar || 'assets/images/default-avatar.png';
    avatar.alt = `${this.messageData.sender} avatar`;
    this.bubble.appendChild(avatar);

    // 消息内容容器
    const contentContainer = document.createElement('div');
    contentContainer.classList.add('message-content-container');

    // 用户名称
    const username = document.createElement('div');
    username.classList.add('message-username');
    username.textContent = this.messageData.username || '用户';
    contentContainer.appendChild(username);

    // 消息内容
    const content = document.createElement('div');
    content.classList.add('message-content');
    content.textContent = this.messageData.content;
    contentContainer.appendChild(content);

    // 时间戳
    const timestamp = document.createElement('div');
    timestamp.classList.add('message-timestamp');
    timestamp.textContent = this.formatTimestamp(this.messageData.timestamp);
    contentContainer.appendChild(timestamp);

    this.bubble.appendChild(contentContainer);

    return this.bubble;
  }

  formatTimestamp(timestamp) {
    const date = new Date(timestamp);
    return `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
  }
}

export default MessageBubble;
